body{
    background-color: #f9f9f9;
    color: #555;
    font-size: .18rem
} 
a{
    color: currentColor;
}
ul{
    width: 100%;
    list-style: none;
    padding: 0;
    border: .01rem solid #e1e1e1;
}
.category{
    width: 100%;   
    .categorytitle{
        width: 100%;
        background-color: #ededed;
        padding: .1rem .2rem;
        display: flex;
        justify-content: space-between;
        border-bottom:2px solid #e1e1e1;
        h4{
            margin: 0;
            color: #333;
            font-size: .26rem;
            font-weight: 800;
            letter-spacing: .1rem;
        }
        span{
            margin-top: .1rem;
        }
    }
    .categorycon{
        display: none; 
        >a{
            display: block;
            // width: 33.3%;
            line-height: 2;
            text-align: center;
            border-right: .01rem solid #e1e1e1;
            border-bottom: .01rem solid #e1e1e1;
        }
        >a:nth-child(3n){
            border-right: none;
        }
    }
    .active{
       display: block;
    }
}